<template>
  <div class="Information">
    <div class="header">
      <div>
        <div class="header-1">
          <div class="header-1-1">
            <div class="tou"></div>
            <span>填写购卡人信息</span>
          </div>
        </div>
        <div>
          <div class="centre-2">
            <div class="centre-2-1">
              <!-- 填写购卡人信息 -->
              <div class="centre-4">
                <el-form
                  class="centre-6-1"
                  size="mini"
                  :model="Mobile"
                  status-icon
                  ref="Mobile"
                  label-width="100px"
                >
                  <div class="centre-6-2">
                    <span>手机号&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <el-input
                      style="width: 144px"
                      oninput="value=value.replace(/[^\d]/g,'')"
                      v-model="Mobile.phone"
                      size="mini"
                    ></el-input>
                    <el-button
                      type="primary"
                      size="mini"
                      class="centre-6-2-1"
                      @click="chaxun"
                      >查询</el-button
                    >
                    <el-button
                      size="mini"
                      type="warning"
                      class="centre-6-2-2"
                      @click="Registration = true"
                      >注册</el-button
                    >
                  </div>
                </el-form>
                <el-descriptions v-if="Querydata != {}">
                  <el-descriptions-item label="姓名">{{
                    Querydata.userName
                  }}</el-descriptions-item>
                  <el-descriptions-item label="生日">{{
                    Querydata.birthday
                  }}</el-descriptions-item>
                  <el-descriptions-item label="证件类型">
                    {{ Querydata.customerIdName }}
                  </el-descriptions-item>
                  <el-descriptions-item label="证件号">{{
                    Querydata.customerCertificateNo
                  }}</el-descriptions-item>
                </el-descriptions>
              </div>

              <br />
              <!-- <div class="centre-2-3">
            <div class="tou"></div>
            <div class="tou-1">
              <span>获赠人员</span>
              <span>
                <el-row>
                  <el-button size="mini" type="primary" @click="Addclick">新增</el-button>
                </el-row>
              </span>
            </div>
          </div>
           <div class="centre-2-4" v-show="isShow">
            <div class="centre-6">
              <div class="centre-6-3">
                <div class="centre-6-9">
                  <span>手机号</span>
                  <el-input style="width: 144px" v-model="sizeForm.otherPhone" size="mini"></el-input>
                </div>
                <span>姓名&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <el-input style="width: 144px" v-model="sizeForm.otherCustomerName" size="mini"></el-input>
                <div class="el-icon-delete-solid" @click="clear"></div>
              </div>
              <div class="centre-6-4">
                <span class="centre-6-5">
                  <div class="centre-6-6">
                    <span>身份证&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <el-input style="width: 144px" v-model="sizeForm.otherCustCertificateNo" size="mini"></el-input>
                  </div>
                </span>
                <div class="centre-6-6">
                  <span>生日&nbsp;&nbsp;&nbsp;&nbsp;</span>
                  <el-date-picker size="mini" style="width: 140px" v-model="sizeForm.birthday" type="date"
                    placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
                </div>
              </div>
            </div>
          </div>  -->
            </div>

            <!-- 会员卡信息 -->
            <div>
              <div class="header-1-1">
                <div class="tou"></div>
                <span>会员卡信息</span>
              </div>
              <!-- 内容 -->
              <div class="message">
                <div class="message-1">
                  <div class="message-1-1">卡类型</div>
                  <div class="message-1-2">
                    <div
                      class="message-1-3"
                      v-for="(item, index) in viplist"
                      :key="(item, index)"
                      @click="CardType(item, index)"
                    >
                      <div class="message-1-3-1">
                        <img
                          :src="baseURL + item.cardCoverImage"
                          class="img_1"
                        />
                      </div>
                      <div class="message-4">
                        <span class="message-4-1">{{ item.cardName }}</span>
                        <span class="message-4-2">{{ item.cardPrice }}</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="message-2">
                  <span>购买年限</span>
                  <el-radio-group v-model="radio" @change="clickadiskay">
                    <el-radio label="1">1年</el-radio>
                    <el-radio label="2">2年</el-radio>
                  </el-radio-group>
                </div>
                <div>
                  <div class="message-2" style="margin: 20px 0 0 20px">
                    <span>开卡时间</span>
                    <el-radio-group v-model="Cardopeningtimeselection">
                      <el-radio label="diately">立即执行</el-radio>
                      <el-radio label="delay" :disabled="!isHaveVipType"
                        >延后执行</el-radio
                      >
                    </el-radio-group>
                  </div>
                </div>
              </div>
              <!-- 选择辅营产品 -->
              <!-- <div class="header-1-1">
            <div class="tou"></div>
            <span>选择辅营产品</span>
          </div>
          <div style="background:#f7f6f9">
            <el-table ref="multipleTable" :data="selectReturnData" tooltip-effect="dark" :header-cell-style="{
          background: '#f7f6f9',
        }" @selection-change="handleSelectionChangefuying">
              <el-table-column type="selection" width="55">
              </el-table-column>
              <el-table-column label="名称" width="140">
                <template slot-scope="scope">
                  <el-tooltip content="Bottom center" placement="bottom" effect="light">
                    <div slot="content">
                      <div>简介：{{scope.row.describe}}</div>
                      <div>
                        详细说明：{{scope.row.explain}}
                      </div>

                      <div>强制提醒：{{scope.row.remaid}}</div>
                    </div>
                    <div>{{scope.row.name}}</div>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column label="价格">
                <template slot-scope="scope">
                  <template>{{scope.row.salePrice}}</template>
                </template>
              </el-table-column>

            </el-table>

          </div> -->
              <!-- 选择成交方式 -->
              <!-- <div class="header-1-1">
            <div class="tou"></div>
            <span>选择成交方式</span>
          </div>
          <div class="make">
            <span>选择成交方式</span>
            <div class="block">
              <span class="demonstration"></span>
              <div>
                <el-select size="mini" clearable v-model="value" placeholder="请选择">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </div>
          </div> -->
              <!-- 选择支付方式 -->
              <div class="header-1-1">
                <div class="tou"></div>
                <span>选择支付方式</span>
              </div>
              <div class="pay">
                <span>选择支付方式</span>
                <div class="block">
                  <span class="demonstration"></span>
                  <div>
                    <el-select
                      size="mini"
                      clearable
                      v-model="payvalue"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="(item, index) in payLists"
                        :key="index"
                        :label="item.name"
                        :value="item.type"
                      >
                      </el-option>
                    </el-select>
                  </div>
                </div>
              </div>

              <!-- 银行卡支付使用 -->
              <div v-show="videopayvisable">
                <div class="header-1-1">
                  <div class="tou"></div>
                  <span>语音电话支付使用</span>
                </div>
                <div class="pay">
                  <span>银行卡账号</span>
                  <div class="block">
                    <span class="demonstration"></span>
                    <div>
                      <!-- <span class="invoice-6-1">银行账号</span> -->
                      <div class="invoice-6-2">
                        <span class="demonstration"></span>
                        <div>
                          <el-input
                            style="width: 204px"
                            v-model="invoiceList.bankAccount"
                            size="mini"
                          >
                          </el-input>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div v-if="payvalue == 'wkwm'">
                <div class="header-1-1">
                  <div class="tou"></div>
                  <span>无卡无密支付使用</span>
                </div>
                <div class="pay">
                  <span>银行卡账号</span>
                  <div class="block">
                    <span class="demonstration"></span>
                    <div>
                      <!-- <span class="invoice-6-1">银行账号</span> -->
                      <el-select
                        clearable
                        size="mini"
                        v-model="Querydata.bankid"
                      >
                        <el-option
                          v-for="item in bankCardList"
                          :key="item.id"
                          :label="item.bankName"
                          :value="item.id"
                        >
                        </el-option>
                      </el-select>
                      <!-- <el-input size="mini" v-model="Querydata.bankid"></el-input> -->
                    </div>
                  </div>
                  <div>
                    <el-button
                      style="width: 90px"
                      size="mini"
                      type="primary"
                      @click="isnewCardshowMethod()"
                      >使用新卡</el-button
                    >
                  </div>
                </div>
                <div v-if="bankCardList.length == 0 || isnewCardshow">
                  <span style="font-size: 10px; color: red"
                    >注：如有银行卡选择，可不必填</span
                  >
                  <el-form
                    size="mini"
                    :inline="true"
                    ref="way"
                    :model="way"
                    :rules="addrules"
                    class="bandCard"
                  >
                    <el-form-item label="请选择卡类型" prop="cardType">
                      <el-select
                        v-model="way.cardType"
                        placeholder="请选择"
                        clearable
                      >
                        <el-option
                          v-for="item in leixing"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>

                    <el-form-item label="请输入卡号" prop="cardNumber">
                      <el-input
                        @blur="cardNumberchange"
                        placeholder="请输入卡号"
                        v-model="way.cardNumber"
                        size="mini"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="银行名称" prop="cardNumber">
                      <el-input
                        disabled
                        v-model="way.bankName"
                        size="mini"
                      ></el-input>
                    </el-form-item>
                    <el-form-item
                      label="请选择有效期"
                      v-if="way.cardType == '信用卡'"
                      prop="creditCardTime"
                    >
                      <!-- <el-date-picker size="mini" v-model="way.creditCardTime" type="date" placeholder="选择日期">
                </el-date-picker> -->
                      <el-date-picker
                        v-model="way.creditCardTime"
                        type="month"
                        placeholder="选择有效期"
                        format="YYYY-MM"
                        value-format="YYYY-MM"
                      >
                      </el-date-picker>
                    </el-form-item>
                    <el-form-item
                      label="请输入CVV2"
                      prop="CVV2"
                      v-if="way.cardType == '信用卡'"
                    >
                      <el-input
                        placeholder="请输入CVV2"
                        v-model="way.CVV2"
                        size="mini"
                      >
                      </el-input>
                    </el-form-item>
                    <el-form-item label="预留手机号" prop="obligatePhone">
                      <el-input
                        placeholder="请输入手机号"
                        v-model="way.obligatePhone"
                        size="mini"
                      >
                      </el-input>
                    </el-form-item>
                    <el-form-item label="持卡人姓名" prop="cardholder">
                      <el-input
                        placeholder="请输入持卡人姓名"
                        v-model="way.cardholder"
                        size="mini"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="请选择证件类型" prop="documentsType">
                      <el-select
                        v-model="way.documentsType"
                        placeholder="请选择证件类型"
                        size="mini"
                        clearable
                      >
                        <el-option
                          v-for="item in zhengjian"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="请输入证件号" prop="documentsPhone">
                      <el-input
                        placeholder="请输入证件号"
                        v-model="way.documentsPhone"
                        size="mini"
                      ></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button
                        @click="getbackInsertBankCard('way')"
                        type="primary"
                        >新增银行卡</el-button
                      >
                    </el-form-item>
                  </el-form>
                </div>
              </div>
              <!-- 发票信息 -->
              <div class="centre-2-3">
                <div class="tou"></div>
                <div class="tou-1">
                  <span>发票信息</span>
                  <span> </span>
                </div>
              </div>
              <!--发票信息 内容 -->
              <div class="invoice">
                <el-form
                  :inline="true"
                  size="mini"
                  :model="invoiceList"
                  class="demo-form-inline"
                >
                  <el-form-item label="发票抬头">
                    <el-select
                      v-if="invoiceinformation.length != 0"
                      @change="changeInvoiceList"
                      style="width: 204px"
                      v-model="invoiceList.invoiceHeadsUp"
                      placeholder="请选择"
                      size="mini"
                      clearable
                    >
                      <el-option
                        v-for="(item, index) in invoiceinformation"
                        :key="index"
                        :label="item.invoiceHead"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                    <el-input
                      v-if="invoiceinformation.length == 0"
                      style="width: 204px"
                      v-model="invoiceList.invoiceHeadsUp"
                      size="mini"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="电话">
                    <el-input
                      style="width: 204px"
                      v-model="invoiceList.phone"
                      size="mini"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="识别号">
                    <el-input
                      style="width: 204px"
                      v-model="invoiceList.identificationNumber"
                      size="mini"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="注册地址">
                    <el-input
                      style="width: 204px"
                      v-model="invoiceList.registeredAddress"
                      size="mini"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="银行账号">
                    <el-input
                      style="width: 204px"
                      v-model="invoiceList.custbankaccount"
                      size="mini"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="银行名称">
                    <el-input
                      style="width: 204px"
                      v-model="invoiceList.custbankname"
                      size="mini"
                    ></el-input>
                  </el-form-item>
                </el-form>
              </div>
              <!-- <div v-if="this.invoiceinformation&&this.Querydata.userName !=''">
                <el-button size="mini" type="primary" @click="addInvoicemethods"
                  >新增发票</el-button
                >
              </div> -->
            </div>
          </div>
          <div class="box">
            <div class="wei">
              <!-- <el-checkbox v-model="checked">备选项</el-checkbox> -->
              <el-checkbox v-model="isread" @click="isreaded"
                ><span style="font-weight: bolder">
                  请确认您已认真阅读并且同意：</span
                > </el-checkbox
              ><a @click="gongsimethod()" class="gongsi"
                >《渎失职管理规定知情同意书》</a
              >
            </div>
            <div class="wei-1">
              <el-row>
             
                <el-button
                  type="warning"
                  style="background-color: #f6b23e; font-weight: bolder"
                  @click="islook"
                >
                  立即购买&nbsp;>
                </el-button>
              </el-row>
            </div>
            <!-- 购卡详情 -->
            <div></div>
          </div>
        </div>
      </div>
      <!-- 右边 -->
      <div>
        <div class="centre-2-2">
          <div class="img-1">
            <img :src="baseURL + vipCard.cardCoverImage" class="img_2" />
          </div>
          <div class="img-1-1">
            <span>{{ vipCard.cardName }}</span
            ><br />
            <span>
              购买年限：
              <span style="margin: 0 0 0 40%">{{ radio }}年</span>
            </span>
          </div>
          <!-- 黑金会员出行卡  -->
          <div class="img-1-2"></div>
          <!-- <div class="img-1-3">
            <div>
              <span>金币抵扣:&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <span class="img-1-4"
                >-￥{{ this.paycardmoney.usedDepositMoney }}</span
              >
            </div>
            <div>
              <span>积分抵扣:&nbsp;&nbsp;&nbsp;&nbsp;</span
              ><span class="img-1-4"
                >-￥{{ this.paycardmoney.creditsNumMoney }}</span
              >
            </div>
          </div> -->
          <!-- <div class="img-1-2"></div> -->
          <div class="img-1-5">
            <!-- <span>￥{{ this.paycardmoney.usedMoney + this.fuyingmoney }}</span>有浮盈产品价格 -->
            <span>￥{{ this.paycardmoney.payMoney }}</span>
            <span>购卡合计: </span>
          </div>
        </div>
      </div>
    </div>
    <!-- 新增发票 -->
    <el-dialog
      title="新增发票"
      :visible.sync="addLog"
      :close-on-click-modal="false"
      width="50%"
    >
      <el-form
        :model="orderadd"
        :rules="rules"
        ref="orderadd"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="发票类型" prop="invoiceType">
          <el-select
            v-model="orderadd.invoiceType"
            placeholder="请选择活动区域"
          >
            <el-option label="个人" value="personal"></el-option>
            <el-option label="公司" value="company"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="发票抬头" prop="invoiceHeadsUp">
          <el-input v-model="orderadd.invoiceHeadsUp"></el-input>
        </el-form-item>
        <el-form-item
          v-if="orderadd.invoiceType == 'company'"
          label="识别号"
          prop="identificationNumber"
        >
          <el-input v-model="orderadd.identificationNumber"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('orderadd')"
            >立即创建</el-button
          >
          <el-button @click="addLog = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 注册弹窗 -->
    <el-dialog
      title="会员卡管理-注册手机号"
      :visible.sync="Registration"
      :close-on-click-modal="false"
      width="40%"
    >
      <div class="header-1">
        <div class="header-1-1-1">
          <div class="tou"></div>
          <span>注册手机号</span>
        </div>
      </div>
      <el-form
        size="mini"
        :model="registered"
        status-icon
        ref="registered"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="姓名" prop="customerName">
          <el-input
            size="mini"
            style="width: 200px"
            v-model="registered.customerName"
            oninput="value=value.replace(/[^\d]/g,''),"
            placeholder="请输入姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="contractPhoneOne">
          <el-input
            size="mini"
            oninput="value=value.replace(/[^\d]/g,'')"
            maxlength="11"
            style="width: 200px"
            v-model="registered.contractPhoneOne"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
        <el-form-item label="证件类型" prop="deptName">
          <el-select clearable v-model="registered.idType" placeholder="请选择">
            <el-option
              v-for="(item, index) in certificate"
              :key="index"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证件号" prop="custCertificateNo">
          <el-input
            size="mini"
            style="width: 200px"
            v-model="registered.custCertificateNo"
            placeholder="请输入证件号"
            oninput="value=value.replace(/[^\d]/g,'')"
            maxlength="18"
          ></el-input>
        </el-form-item>
        <el-form-item label="生日" prop="birthday">
          <el-date-picker
            value-format="yyyy-MM-dd"
            @change="getBirthDate"
            v-model="registered.birthday"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-button
          size="mini"
          type="primary"
          @click="enrollmethod"
          style="
            width: 110px;
            font-size: 10px;
            color: #fff;
            height: 30px;
            background-color: #f6b23e;
          "
          >确定</el-button
        >
        <el-button
          size="mini"
          type="primary"
          @click="Registration = false"
          style="
            width: 110px;
            font-size: 10px;
            color: #fff;
            height: 30px;
            background-color: #f6b23e;
          "
          >取消</el-button
        >
      </el-form>
    </el-dialog>
    <!-- 购卡详情 -->
    <el-dialog
      title="支付详情"
      :visible.sync="centerDialogVisiblepay"
      :close-on-click-modal="false"
      width="70%"
      center
    >
      <div class="box1">
        <!-- 购卡卡人信息 -->
        <div class="box1-top">
          <div class="xzq">购卡人信息</div>
        </div>
        <div class="box1-body">
          <span class="body">购卡人姓名:</span>
          <span class="valuecss">{{ Querydata.userName }}</span>
          <span class="body">购卡人手机号:</span>
          <span class="valuecss">{{ this.Mobile.phone }}</span>
          <span class="body">购卡人证件号:</span>
          <span class="valuecss">{{ Querydata.customerCertificateNo }}</span>
        </div>
        <!-- 获赠人信息 -->
        <!-- <div class="box1-top">
                    <div class="xzq">获赠人信息</div>
                  </div>
                  <div class="box1-body">
                    <span class="body">获赠人姓名:</span>
                    <span class="valuecss">{{
                      this.sizeForm.otherCustomerName
                    }}</span>
                    <span class="body">获赠人手机号:</span>
                    <span class="valuecss">{{ this.sizeForm.otherPhone }}</span>
                    <span class="body">获赠人证件号:</span>
                    <span class="valuecss">{{
                      this.sizeForm.otherCustCertificateNo
                    }}</span>
                  </div> -->
        <!-- 优惠信息 -->
        <div class="box1-top">
          <div class="xzq">优惠信息</div>
        </div>
        <div class="box1-body">
          <span class="body">预留款金额:</span>
          <span class="valuecss">{{
            numFilter(Querydata.depositBusiness)
          }}</span>
          <span class="body">本次使用:</span>
          <span class="valuecss">
            <el-input
              style="width: 80px"
              size="mini"
              v-model.number="gold"
              :disabled="numFilter(Querydata.depositBusiness) < 0"
              placeholder=""
              @input="inputaside"
            >
            </el-input>
          </span>
          <span>使用后余额</span>
          <span class="valuecss">{{
            numFilter(Querydata.depositBusiness - gold)
          }}</span>
        </div>
        <div class="box1-body">
          <span class="body">金币金额</span>:
          <span class="valuecss">{{ numFilter(Querydata.exchange) }}</span>
          <span class="body">本次使用:</span>
          <span class="valuecss">
            <el-input
              style="width: 80px"
              size="mini"
              v-model.number="gard"
              placeholder=""
              @input="inputasidegard"
            >
            </el-input>
          </span>
          <span>使用后余额</span>
          <span class="valuecss">{{
            numFilter(Querydata.exchange - gard)
          }}</span>
        </div>
        <!-- 购卡信息 -->
        <div class="box1-top">
          <div class="xzq">购卡信息</div>
        </div>
        <div class="box1-body">
          <span class="body">购卡名称:</span>
          <span class="valuecss">{{ this.vipCard.cardName }}</span>
          <span class="body">购卡时间:</span>
          <span class="valuecss">{{ this.radio }}年</span>
          <span class="body">购卡金额:</span>
          <span class="valuecss">￥{{ paycardmoney.payMoney }}</span>
          <span class="body">付款金额:</span>
          <span
            class="valuecss"
            style="color: red; font-weight: bold; font-size: 18px"
            >￥{{ numFilter(paycardmoney.payMoney - gold - gard) }}</span
          >
        </div>
        <!-- 辅营产品信息 -->
        <div class="box1-top">
          <div class="xzq">辅营产品信息</div>
        </div>
        <div class="box1-body" v-if="passengerListdetilList.length == 0">
          <span class="body">产品名称:</span>
          <span class="valuecss"> </span>
          <span class="body">价格</span>
          <span class="valuecss"> </span>
          <span class="body">份数</span>
          <span class="valuecss"></span>
        </div>
        <div
          class="box1-body"
          v-for="(item, index) in passengerListdetilList"
          :key="index"
        >
          <span class="body">产品名称:</span>
          <span class="valuecss">{{ item.name }}</span>
          <span class="body">价格</span>
          <span class="valuecss">￥{{ item.costPrice }}</span>
          <span class="body">份数</span>
          <span class="valuecss">1</span>
        </div>
        <!-- 支付信息 -->
        <div class="box1-top">
          <div class="xzq">支付信息</div>
        </div>
        <div class="box1-body">
          <span class="body">支付方式:</span>
          <span class="valuecss">{{
            this.payvalue == "wkwm" ? "无卡无密" : this.payvalue == "ylewm"?'银联二维码': "总办赠卡"
          }}</span>
          <span class="body" v-if="this.payvalue == 'wkwm'">银行卡号:</span>
          <span class="valuecss" v-if="this.payvalue == 'wkwm'">{{
            this.invoiceList.bankAccount
          }}</span>
        </div>
        <!-- 支付信息 -->
        <div class="box1-top">
          <div class="xzq">发票信息</div>
        </div>
        <div>
          <div>
            <span class="body">发票抬头:</span>
            <span class="valuecss">{{ invoiceList.invoiceHead }}</span>
            <span class="body">识别号:</span>
            <span class="valuecss">{{ invoiceList.identificationNumber }}</span>
            <span class="body">手机号:</span>
            <span class="valuecss">{{ invoiceList.phone }}</span>
          </div>
          <div>
            <span class="body">注册地址:</span>
            <span class="valuecss">{{ invoiceList.registeredAddress }}</span>
            <span class="body">银行账号:</span>
            <span class="valuecss">{{ invoiceList.custbankaccount }}</span>
            <span class="body">银行名称:</span>
            <span class="valuecss">{{ invoiceList.custbankname }}</span>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisiblepay = false">取 消</el-button>
        <el-button type="primary" @click="surepay()">确认支付</el-button>
      </span>
    </el-dialog>
    <!-- 扫码支付 -->
       <el-dialog
                  title="支付窗口"
                  :visible.sync="centerDialogVisible"
                  width="30%"
                  center
                >
                  <span>请您扫码支付</span>
                  <!-- 二维码 -->
                  <div class="index-body" v-if="qrcode">
                    请将此二维码发给会员
                    <div class="QRCodeurl">
                      <img :src="this.qrcode" alt="" />
                      <!-- 这里的src的值就是生成的二维码的地址 -->
                    </div>
                  </div>

                  <span slot="footer" class="dialog-footer">
                    <el-button @click="centerDialogVisible = false"
                      >取 消</el-button
                    >
                    <el-button type="primary" @click="centerDialogVisible = false"
                      >确 定</el-button
                    >
                  </span>
                </el-dialog>
  </div>
</template>
<script>
import QRCode from "qrcode";
export default {
  name: "Information",
  data() {
    return {
      baseURL: localStorage.getItem("baseUrl"),
      isexpire: true,
      queryCardVoList: [],
      rules: {
        invoiceType: [
          {
            required: true,
            message: "请选择发票类型",
            trigger: "change",
          },
        ],
        invoiceHeadsUp: [
          {
            required: true,
            message: "请输入发票抬头",
            trigger: "blur",
          },
        ],
        identificationNumber: [
          {
            required: true,
            message: "请输入识别号",
            trigger: "blur",
          },
        ],
      },
      orderadd: {
        invoiceType: "",
        invoiceHeadsUp: "",
        identificationNumber: "",
        // memberId:this.Lookup.customerId
      },
      addLog: false,
      invoiceinformation: [],
      // 浮盈产品列表
      selectReturnData: [],
      // 选中辅营产品的数据
      passengerList: {},
      // 选中的辅营产品id
      products: [],
      fuyingmoney: 0,
      // 开卡时间选择
      Cardopeningtimeselection: "diately",
      // usegold: 0,
      zhengjian: [
        {
          value: "ZGJMSFZ",
          label: "身份证",
        },
        {
          value: "MILITARY",
          label: "军人证",
        },
        {
          value: "HZ",
          label: "护照",
        },
        {
          value: "GAJMLWNDTXZ",
          label: "港澳居民来往内地通行证",
        },
        {
          value: "GATJMJZZ",
          label: "港澳台居民居住证",
        },
        {
          value: "TWJMLWDLTXZ",
          label: "台湾居民来往大陆通行证",
        },
        {
          value: "WGRYJJLSFZ",
          label: "外国人永久居留身份证",
        },
        {
          value: "HKAMP",
          label: "港澳通行证",
        },
        {
          value: "HKB",
          label: "户口本",
        },
        {
          value: "BIRTH",
          label: "出生证明",
        },
      ],
      leixing: [
        {
          label: "信用卡",
          value: "信用卡",
        },
        {
          label: "借记卡",
          value: "借记卡",
        },
      ],
      addrules: {
        cardNumber: [
          {
            required: true,
            message: "请输入卡号",
            trigger: "change",
          },
        ],
        cardType: [
          {
            required: true,
            message: "请选择卡类型",
            trigger: "change",
          },
        ],
        creditCardTime: [
          {
            required: true,
            message: "请选择有效期",
            trigger: "change",
          },
        ],
        obligatePhone: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "change",
          },
        ],
        cardholder: [
          {
            required: true,
            message: "请输入持卡人姓名",
            trigger: "change",
          },
        ],
        documentsType: [
          {
            required: true,
            message: "请选择证件类型",
            trigger: "change",
          },
        ],
        documentsPhone: [
          {
            required: true,
            message: "请输入证件号",
            trigger: "change",
          },
        ],
        CVV2: [
          {
            required: true,
            message: "请输入证件号",
            trigger: "change",
          },
        ],
      },
      isnewCardshow: false,
      way: {
        bankName: "",
        bankId: "",
        cardNumber: "",
        creditCardTime: "",
        cardType: "",
        cardholder: "",
        obligatePhone: "",
        documentsType: "",
        documentsPhone: "",
        cardNumber: "",
        CVV2: null,
      },
      // 计算出购卡金额
      paycardmoney: {},
      // 银行卡信息
      bankCardList: [],
      // 语音支付显示
      videopayvisable: false,
      // 银行卡支付显示
      bankcodevisable: false,
      // 购卡支付详情页面弹窗
      centerDialogVisiblepay: false,
      payLists: [
        {
          name: "无卡无密",
          type: "wkwm",
        },
        {
          name: "总办赠送",
          type: "zbzs",
        },
         {
          name: "银联二维码",
          type: "ylewm",
        },
      ],
      Orderobj: {},
      // 确认支付
      Bankcard: {
        cardNumber: "",
        creditCardTime: "",
        cardholder: "",
        obligatePhone: "",
        documentsTyp: "",
        documentsPhone: "",
      },
      customerIdType: "",
      // 二维码链接
      QRCodeurl: "",
      qrcode: "", //存储二维码图片的路径
      // 订单号
      OrderNum: "",
      // 弹出框显示
      centerDialogVisible: false,
      sdafdd: {},
      // 返回卡信息
      vipCards: {},
      // vip卡id
      vipCardID: "",
      // 注册证件类型
      certificate: [
        {
          value: "ID_CARD",
          label: "身份证",
        },
        {
          value: "MILITARY_ID",
          label: "军人证",
        },
        {
          value: "PASSPORT",
          label: "护照",
        },
        {
          value: "MTPFHKAMR",
          label: "港澳居民来往内地通行证",
        },
        {
          value: "MTPFTR",
          label: "台湾居民来往大陆通行证",
        },
        {
          value: "RPFHKMATR",
          label: "台湾居民来往大陆通行证",
        },
        {
          value: "PRICFF",
          label: "外国人永久居留身份证",
        },
        {
          value: "HKAMP",
          label: "港澳通行证",
        },
        {
          value: "ACCOUNT_BOOK",
          label: "户口本",
        },
        {
          value: "BIRTH_CERTIFICATE",
          label: "出生证明",
        },
        {
          value: "TAIWAN_PASS",
          label: "台湾通行证",
        },
      ],
      //手机号查询
      Mobile: {
        phone: "",
      },
      // 发票抬头
      Lookup: {
        customerId: "",
      },
      // 用户注册
      birthday: "",
      registered: {
        customerName: "",
        idType: "",
        custCertificateNo: "",
        contractPhoneOne: "",
        birthday: "",
      },
      isShow: false,
      Registration: false,
      viplist: [],
      Querydata: {
        userName: "",
        certificateType: "",
        customerCertificateNo: "",
        userMoneyNumber: 0,
        userSpeciesNumber: 0,
        bankid:""
      },

      formLabelAlign: {
        name: "",
        checked: true,
      },
      //选中的会员卡
      vipCard: {},
      radio: "1",
      checkList: [], //折扣选中
      //获赠人员信息
      sizeForm: {
        otherPhone: "",
        otherCustomerName: "",
        otherIdType: "",
        otherCustCertificateNo: "",
      },
      Coupon: "", //优惠券
      gold: 0, //金币
      gard: 0, //积分
      //成交方式
      options: [
        {
          value: "选项1",
          label: "微信成交",
        },
        {
          value: "选项2",
          label: "外呼成交",
        },
        {
          value: "选项3",
          label: "接通电话成交",
        },
      ],
      value: "",
      //支付方式
      payvalue: "",
      agionselect: "",
      //发票抬头信息
      //发票抬头信息
      invoiceList: {
        invoiceHeadsUp: "",
        identificationNumber: "",
        registeredAddress: "",
        phone: "",
        custbankname: "",
        custbankaccount: "",
        invoiceHead: "",
      },
      isread: false,
      // 购买年限
      payyear: "",
      // 详情展示的辅营产品数组
      passengerListdetilList: [],
      // 是否可以延后执行
      isHaveVipType: true,
      //是否点击卡类型
      isClick: 0,
    };
  },
  watch: {
    // radio(nV, oV) {
    //   this.radio = nV;
    //   // this.payyear = this.radio
    //   if (this.radio == 1) {
    //     this.payyear = "one";
    //   }
    //   if (this.radio == 2) {
    //     this.payyear = "two";
    //   }
    // },
    // typevalue(nV, oV) {
    //   this.typevalue = nV;
    //   console.log(nV);
    // },
    // // 监听支付选择框
    // payvalue(nV, oV) {
    //   this.payvalue = nV;
    //   console.log(this.payvalue);
    //   if (this.payvalue == "") {
    //     this.videopayvisable = false;
    //     this.bankcodevisable = false;
    //   }
    //   if (this.payvalue == "电话语音支付") {
    //     this.videopayvisable = true;
    //     this.bankcodevisable = false;
    //   }
    //   if (this.payvalue == "无卡无密支付") {
    //     this.videopayvisable = false;
    //     this.bankcodevisable = true;
    //   }
    //   if (this.payvalue == "银联二维码支付") {
    //     this.videopayvisable = false;
    //     this.bankcodevisable = false;
    //   }
    // },
  },
  computed: {},
  methods: {
    isnewCardshowMethod() {
      this.isnewCardshow = !this.isnewCardshow;
    },
    // 条款点击事件
    // gongsimethod() {
    //   window.open()
    // },
    gongsimethod() {
      window.open(
        // "http://172.16.10.45:7777/#/customer/notification", //需要跳转的路由
        "http://172.16.7.51:7777/#/customer/notification", //需要跳转的路由
        "width=1500,height=800,toolbar=no"
      );
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          
          this.$axios
            .postinvoiceOrderadd({
              invoiceType: this.orderadd.invoiceType,
              invoiceHeadsUp: this.orderadd.invoiceHeadsUp,
              identificationNumber: this.orderadd.identificationNumber,
              customerId: this.Lookup.customerId,
              whetherToDefault: false,
            })
            .then((res) => {
              if (res.code == 200) {
                this.getselectVoucher();
                this.addLog = false;
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    addInvoicemethods() {
      this.orderadd = {};
      // this.orderaddList={}
      this.addLog = true;
      // this.getfrequentTraveler()
    },

    numFilter(value) {
      const realVal = parseFloat(value).toFixed(2);

      return realVal;
    },

    clickadiskay() {
      if (this.Querydata.userName == "") {
        this.$message({
          message: "请先查询会员信息",
          type: "warning",
        });
      } else {
        if (this.vipCard.cardPrice == "") {
        } else {
          let a = "";
          console.log(this.radio);
          a =
            this.radio == 1
              ? this.vipCard.cardPrice * 1
              : this.vipCard.continuousCardPrice * 2;
          console.log(a);
          this.$set(this.paycardmoney, "payMoney", a);
        }
      }
      console.log(this.paycardmoney.usedMoney);
    },
    inputaside(row) {
      console.log(row);
      if (row == "") {
        this.gold = 0;
      }
      if (this.Querydata.depositBusiness + this.gard < row) {
        this.$message({
          message: "使用金额不得大于预留款现有金额",
          type: "warning",
        });
        this.gold = this.Querydata.depositBusiness;
        if (this.Querydata.depositBusiness < this.paycardmoney.payMoney) {
          this.gold = this.Querydata.depositBusiness;
        } else {
          this.gold = this.paycardmoney.payMoney;
        }
      } else if (this.paycardmoney.payMoney - this.gard < row) {
        this.$message({
          message: "使用预留款金额不得大于订单总价",
          type: "warning",
        });
        this.gold = this.paycardmoney.payMoney - this.gard;
      }
    },

    inputasidegard(row) {
      console.log(row);
      if (row == "") {
        this.gard = 0;
      }
      if (this.Querydata.exchange < row) {
        this.$message({
          message: "使用金额不得大于金币现有金额",
          type: "warning",
        });
        // this.row = this.paycardmoney.payMoney - this.gold;
        this.gard = this.Querydata.exchange;
      } else {
        if (this.paycardmoney.payMoney - this.gold < row) {
          this.$message({
            message: "使用预留款金额不得大于订单总价",
            type: "warning",
          });
          this.gard = this.paycardmoney.payMoney - this.gold;
        }
      }
      //  if ((this.Querydata.exchange-this.gold) < row) {
      //   this.$message({
      //     message: "使用金额不得大于金币现有金额",
      //     type: "warning",
      //   });
      //   this.gard = this.paycardmoney.payMoney;
      // }
    },
    changeInvoiceList(e) {
      console.log(e);
      let obj = {};
      obj = this.invoiceinformation.find((item) => {
        return item.id === e;
      });
      console.log(obj);
      this.invoiceList.phone = obj.phone;
      this.invoiceList.identificationNumber = obj.invoiceNumber;
      this.invoiceList.registeredAddress = obj.invoiceAddress;
      this.invoiceList.custbankname = obj.bankName;
      this.invoiceList.custbankaccount = obj.bankAccount;
      this.invoiceList.invoiceHead = obj.invoiceHead;
    },
    // 新增银行卡
    getbackInsertBankCard(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.Querydata.userName) {
            console.log(this.way);
            this.$axios
              .getaddUsrBackCard({
                bankId: this.way.bankId,
                bankName: this.way.bankName,
                cardNumber: this.way.cardNumber,
                cardType:
                  this.way.cardType == "借记卡" ? "debitcard" : "creditcard",
                reservePhone: this.way.obligatePhone,
                CVV2: this.way.CVV2,
                creditFailureDate: this.way.creditCardTime,
                userType: this.way.documentsType,
                userCertificate: this.way.documentsPhone,
                cardholder: this.way.cardholder,
                userId: this.Querydata.id,

                // cardNumber: this.way.cardNumber,
                // // creditCardTime: this.way.creditCardTime,
                // cardType: this.way.cardType,
                // cardholder: this.way.cardholder,
                // obligatePhone: this.way.obligatePhone,
                // documentsType: this.way.documentsType,
                // documentsPhone: this.way.documentsPhone,
                // customerId: this.Querydata.customerId,
                // CVV2: this.way.CVV2,
              })
              .then((res) => {
                console.log(res);
                if (res.code == "00000") {
                  this.$message({
                    message: "新增成功",
                    type: "success",
                  });
                  this.chaxun();
                  this.isnewCardshow = !this.isnewCardshow;

                  this.$refs[formName].resetFields();
                }
              });
          } else {
            this.$message({
              message: "请查询会员后，新增银行卡",
              type: "warning",
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 会员注册
    enrollmethod() {
      if (
        this.registered.customerName != "" &&
        this.registered.idType != "" &&
        this.registered.custCertificateNo != "" &&
        this.registered.contractPhoneOne != "" &&
        this.registered.birthday != ""
      ) {
        this.$axios
          .getpurchaseQueryCustomerData({
            phone: this.registered.contractPhoneOne,
          })
          .then((res) => {
            console.log(res);
            if (res.data.msg == "查无此用户") {
              this.getregister(); //注册接口
            } else {
              this.$message({
                message: "当前手机号已注册，请直接使用",
                type: "warning",
              });
              this.Registration = false;
            }
          });
      } else {
        this.$message({
          message: "请填写完整信息后，在进行注册",
          type: "warning",
        });
      }
    },

    BankcardhandleClose() {
      this.Bankcards = false;
    },

    // 清空获赠人员
    clear() {
      (this.sizeForm.otherPhone = ""),
        (this.sizeForm.otherCustomerName = ""),
        (this.sizeForm.otherCustCertificateNo = ""),
        (this.sizeForm.otherCustCertificateNo = "");
    },
    // 判断是否已读
    isreaded() {
      this.isread = !this.isread;
    },
    // 去支付判断支付方式
    surepay() {
      console.log(this.payvalue);
      let invoiceRecordBO = {};
      invoiceRecordBO.custname = this.invoiceList.invoiceHead;
      invoiceRecordBO.custtaxno = this.invoiceList.identificationNumber;
      invoiceRecordBO.custaddress = this.invoiceList.registeredAddress;
      invoiceRecordBO.custphone = this.invoiceList.phone;
      invoiceRecordBO.custbankaccount = this.invoiceList.custbankaccount;
      invoiceRecordBO.custbankname = this.invoiceList.custbankname;
      this.$axios
        .getpayCardOrder({
          orderId: this.Orderobj.id,
          executeStatus: this.Cardopeningtimeselection,
          payType: this.payvalue,
          userBankCardId: this.Querydata.bankid,
          userMoneyNumber: this.gold,
          userSpeciesNumber: this.gard,
          invoiceRecordBO: JSON.stringify(invoiceRecordBO),
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            if(this.payvalue == "ylewm"){
               this.qrcodeed(res.data.billQRCode);
              this.centerDialogVisible = true;
            }else{
                   this.$message({
              message: "支付成功",
              type: "success",
            });
            this.closeall();
            this.$router.go(0);
            }
         
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        });

      // if (this.payvalue == "wkwm") {
      //   this.getcardCRMPurchaseBankCard();
      //   console.log(1);
      // } else if (this.payvalue == "电话语音支付") {
      //   this.getcardCRMPurchaseVoicePay();
      //   console.log(2);
      // } else if (this.payvalue == "银联二维码支付") {
      //   this.centerDialogVisible = true;
      //   this.etcardCRMPurchaseGetQRCode();
      //   console.log(3);
      // } else if (this.payvalue == "zbzk") {
      //   this.getcardCRMPurchasePresentCard();
      //   console.log("总办赠卡");
      // }
    },
    // 总办赠卡接口

    getcardCRMPurchasePresentCard() {
      localStorage.setItem("isToken", true);
      this.$axios
        .getcardCRMPurchasePresentCard({
          orderNum: this.OrderNum,
        })
        .then((res) => {
          
          console.log(res);
          if (res.code == "200") {
            this.$message({
              message: res.msg,
              type: "success",
            });
            this.centerDialogVisiblepay = false;
            // this.$router.go(0)
            this.Mobile.phone = "";
          }
        });
    },
    //二维码支付接口
    etcardCRMPurchaseGetQRCode() {
      localStorage.setItem("isToken", true);
      this.$axios
        .getcardCRMPurchaseGetQRCode({
          orderNum: this.OrderNum,
          amount: this.gold,
          type: "Crm",
        })
        .then((res) => {
          
          console.log(res);
          if (res.code == 200) {
            this.Querydata = res.data;
            this.QRCodeurl = this.Querydata.billQRCode;
            console.log(this.QRCodeurl);
            this.qrcodeed();
            // this.$message(res.data.errMsg);
          }
        });
    },
    // 二维码生成
    qrcodeed(QRCodeurl) {
      QRCode.toDataURL(QRCodeurl, {
        //这个this.url就是你扫码后要跳转的地址
        version: 7, //版本号
        errorCorrectionLevel: "Q", //容错率,(建议选较低)更高的级别可以识别更模糊的二维码，但会降低二维码的容量
        width: 280, //设置二维码图片大小
        height: 280,
      })
        .then((url) => {
          console.log(url); //这个url是二维码生成地址，也就是相当于图片地址
          this.qrcode = url; //赋值给变量。用在img的src属性上
        })
        .catch((err) => {
          console.error(err);
        });
    },
    //显示新增获赠人员
    Addclick() {
      this.isShow = !this.isShow;
    },
    //时间
    getBirthDate(date) {
      this.addUserForm.birth = date;
    },
    // 会员卡信息
    getqueryPurchaseCardData() {
      this.$axios
        .getCardList({
          cardStatus: "yes",
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            for (let i = 1; i < res.data.length; i++) {
              this.viplist[i - 1] = res.data[i];
            }
            console.log(this.viplist);
            this.vipCard = res.data[1];
          }
        });
    },
    // 填写购卡人信息
    getpurchaseQueryCustomerData() {
      this.Querydata = {
        userName: "",
      };
      this.bankCardList = [];
      this.invoiceinformation = [];
      this.$axios
        .getqueryUserByCardOrder({
          phone: this.Mobile.phone || "0",
        })
        .then((res) => {
          console.log(res);
          // debugger
          if (res.code == "00000") {
            if (JSON.stringify(res.data) != "{}") {
              this.Querydata = res.data.userInfo;
              this.bankCardList = res.data.userBankCardList;
              this.invoiceinformation = res.data.userInvoiceList;
              this.Querydata.depositBusiness = res.data.userMoneyNumber;
              this.Querydata.exchange = res.data.userSpeciesNumber;
              this.Querydata.customerIdName =
                res.data.userCardInfo.certificateType == "ZGJMSFZ"
                  ? "身份证"
                  : "";
              this.Querydata.certificateType =
                res.data.userCardInfo.certificateType;
              this.Querydata.customerCertificateNo =
                res.data.userCardInfo.certificateNumber;
            } else {
              this.$confirm("查无此用户", "提示", {
                confirmButtonText: "确定",
                type: "warning",
              });
            }
          }
        });
    },
    //查会员卡过期时间
    getQueryCardVoByCustomerId(customerId) {
      this.$axios
        .getQueryCardVoByCustomerId({
          customerId: customerId,
        })
        .then((res) => {
          console.log(res);
          this.queryCardVoList = res.data.reverse();
          console.log(this.queryCardVoList);
        });
    },
    // 查银行卡名称
    cardNumberchange(val) {
      if (val.length == 16 || val.length == 17 || val.length == 19) {
        this.$axios
          .getBankCardById({
            cardNumber: val,
          })
          .then((res) => {
            console.log(res);
            if (res.code == "00000") {
              this.way.bankName = res.data.bankName;
              this.way.bankId = res.data.id;
            } else {
              this.way.bankId = "";
              this.way.bankName = "";
            }
          });
      }
    },
    getpurchaseQueryCustomerDataagion() {
      this.$axios
        .getpurchaseQueryCustomerData({
          phone: this.Mobile.phone,
        })
        .then((res) => {
          console.log(res);

          // debugger
          if (res.data.msg == "查无此用户") {
            this.agionselect = res.data.msg;
          }
          console.log(this.agionselect);
        });
    },
    // 用户注册
    getregister() {
      this.$axios
        .getregister({
          customerName: this.registered.customerName,
          idType: this.registered.idType,
          custCertificateNo: this.registered.custCertificateNo,
          contractPhoneOne: this.registered.contractPhoneOne,
          birthday: this.registered.birthday,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "200") {
            this.$message({
              message: "注册成功",
              type: "success",
            });
            this.Registration = false;
            this.registered = {};
          }
        });
    },
    // 查询会员发票抬头
    getpurchaseQueryCommon() {
      this.$axios
        .getpurchaseQueryCommon({
          customerId: this.Lookup.customerId,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "200") {
            console.log(res);

            this.invoiceList = res.data;
            if (this.invoiceList.length == 0) {
              this.$message({
                message: "未查到发票抬头",
                type: "warning",
              });
            }
            console.log(this.invoiceList);
          } else {
          }
        });
    },
    // 手机号查询
    chaxun() {
      if (this.Mobile.phone != "") {
        this.getpurchaseQueryCustomerData();
      } else {
        this.$message({
          message: "请输入会员手机号",
          type: "warning",
        });
      }
    },
    //选中会员卡类型
    CardType(item, index) {
      if (this.Querydata.userName == "") {
        this.$message({
          message: "请先查询会员信息",
          type: "warning",
        });
      } else {
        console.log(item, index, this.Querydata);
        this.vipCard = item;
        this.radio = "";
        this.isClick = 1;
        this.$axios
          .getUserCardStatus({
            userId: this.Querydata.id,
            cardId: item.id,
          })
          .then((res) => {
            console.log(res);
            if (res.data == null) {
              this.isHaveVipType = false;
            } else {
              this.isHaveVipType = true;
            }
          });
      }
    },

    // // 选中的附加产品
    // handleSelectionChangefuying(passengerList) {
    //   this.products = [];
    //   this.fuyingmoney = 0;
    //   console.log(passengerList);
    //   this.passengerListdetilList = passengerList;
    //   if (passengerList.length > 0) {
    //     for (let i = 0; i < passengerList.length; i++) {
    //       this.fuyingmoney += passengerList[i].salePrice;
    //       this.products.push(Number(passengerList[i].id));
    //     }
    //   }
    //   console.log(this.products, this.fuyingmoney);
    // },
    //两个时间相差天数 兼容firefox chrome
    datedifference1(sDate1, sDate2) {
      //sDate1和sDate2是2006-12-18格式
      var dateSpan, tempDate, iDays;
      sDate1 = Date.parse(sDate1);
      sDate2 = Date.parse(sDate2);
      dateSpan = sDate1 - sDate2; // dateSpan = Math.abs(dateSpan);
      iDays = Math.floor(dateSpan / (24 * 3600 * 1000));
      return iDays;
    },
    // 判断是否勾选
    islook() {
      if (this.Querydata.id != "") {
        if (this.vipCard.id != "") {
          if (this.isClick == 1) {
            if (this.radio != "") {
              if (this.payvalue != "") {
                if (this.isread == true) {
                  debugger
                  console.log(this.Querydata.bankid )
                  if (this.payvalue == "wkwm") {
                    if (this.Querydata.bankid != "") {
                      this.puchase();
                    } else {
                      this.$message({
                        message: "请选择银行卡",
                        type: "warning",
                      });
                    }
                  } else {
                    this.puchase();
                  }
                } else {
                  this.$message({
                    message: "请先查看协议并同意！",
                    type: "warning",
                  });
                }
              } else {
                this.$message({
                  message: "请选择支付方式",
                  type: "warning",
                });
              }
            } else {
              this.$message({
                message: "请选择购买年限",
                type: "warning",
              });
            }
          } else {
            this.$message({
              message: "请选择要购买的会员卡",
              type: "warning",
            });
          }
        } else {
          this.$message({
            message: "请选择购买银行卡！",
            type: "warning",
          });
        }
      } else {
        this.$message({
          message: "请先查询会员！",
          type: "warning",
        });
      }
    },
    //立即购买
    puchase() {
      console.log(this.params, this.paycardmoney.usedMoney);
      let params = {};
      (params.Querydata = this.Querydata), //购卡人信息
        (params.sizeForm = this.sizeForm), //获赠人员、
        (params.vipCard = this.vipCard), //会员卡
        (params.year = this.radio), //年限
        (params.coupon = this.coupon), //优惠券
        (params.checked = this.checkList), //折扣方式
        (params.type = this.typevalue), //成交方式
        (params.pay = this.payvalue), //支付方式
        (params.invoiceList = this.invoiceList), //发票信息
        (params.money = this.paycardmoney.usedMoney); //折扣后金额
      this.params = params;
      console.log(params);
      this.vipCards = params.vipCard;
      console.log(this.params);
      this.sdafdd = this.params.Querydata;
      console.log(this.sdafdd);
      //下单接口
      this.etCrmPuyCardOrder();
      //  debugger
    },

    //下单接口
    etCrmPuyCardOrder() {
      console.log(this.paycardmoney.payMoney);
      this.$axios
        .getaddCardOrder({
          userId: this.Querydata.id,
          cardId: this.vipCard.id,
          cardType: this.radio == 1 ? "no" : "yes",
          totalAmount: this.paycardmoney.payMoney,
          otherAmount: 0,
          actualPayAmount: this.paycardmoney.payMoney,
          orderType: "openCard",
          cardHolderName: this.Querydata.userName,
          cardHolderPhone: this.Querydata.phoneOne,
          cardHolderIdType: this.Querydata.certificateType,
          cardHolderIdNumber: this.Querydata.customerCertificateNo,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.Orderobj = res.data;
            this.centerDialogVisiblepay = true;
          }
        });
    },
    // CRM购卡电话语音支付
    getcardCRMPurchaseVoicePay() {
      localStorage.setItem("isToken", true);
      this.$axios
        .getcardCRMPurchaseVoicePay({
          orderNum: this.OrderNum,
          cardNumber: this.invoiceList.bankAccount,
          amount: this.gold,
          type: "Crm",
        })
        .then((res) => {
          
          console.log(res);
          if (res.code == "200") {
            this.closeall();
            this.$message({
              message: res.msg,
              type: "success",
            });
          }
        });
    },

    // CRM购卡无卡无密支付
    getcardCRMPurchaseBankCard() {
      localStorage.setItem("isToken", true);
      // debugger
      this.$axios
        .getcardCRMPurchaseBankCard({
          amount: this.gold,
          orderNum: this.OrderNum,
          bankCardId: Number(this.Querydata.bankid),
          type: "Crm",
        })
        .then((res) => {
          console.log(res);
          if (res.code == "200") {
            this.$message({
              message: res.msg,
              type: "success",
            });
            this.closeall();
            this.$router.go(0);
          } else {
            this.$message({
              message: res.msg,
              type: "warning",
            });
          }
        });
    },
    closeall() {
      this.centerDialogVisible = false;
      this.centerDialogVisiblepay = false;
    },
  },
  mounted() {
    this.getqueryPurchaseCardData();
  },
};
</script>
<style scoped>
.Information {
  /* overflow-y:scroll; */
  background-color: #f2f2f2;
  /* height: 100%; */
}

.header {
  width: 800px;
  margin: auto;
  background-color: #ffffff;
  display: flex;
}

.header-1 {
  text-align: left;
  margin-left: 20px;
  padding-top: 20px;
}

.header-1-1 {
  width: 200px;
  height: 30px;
  font-weight: bolder;
  display: flex;
}

.tou {
  width: 3.5px;
  height: 17px;
  background-color: #4b71bf;
  margin-top: 2px;
  margin-right: 4px;
  font-size: 12px;
}

.tou-1 {
  width: 568px;
  height: 17px;
  display: flex;
  justify-content: space-between;
}

.centre-1 {
  display: flex;
  margin-left: 20px;
  margin-top: 15px;
  font-weight: bolder;
}

.centre-2 {
  display: flex;
  flex-wrap: wrap;
  margin-left: 20px;
}

/* 购卡人信息 */
.centre-2-1 {
  width: 568px;
  height: 130px;
  background-color: #f7f6f9;
}

/* 会员卡大盒子 */
.centre-2-2 {
  width: 188px;
  height: 280px;
  background-color: #f7f6f9;
  margin-left: 10px;
}

.centre-2-3 {
  margin-bottom: 20px;
  font-weight: bolder;
  margin-top: 10px;
  display: flex;
}

/* 获赠人员 */
.centre-2-4 {
  width: 568px;
  /* height: 96px; */
  background-color: #f7f6f9;
  margin-bottom: 60px;
}

.centre-4 {
  padding-left: 20px;
}

.centre-6-1 {
  display: flex;
  flex-wrap: wrap;
  font-size: 11px;
  padding-top: 10px;
}

.centre-5 {
  margin-left: 40px;
  margin-top: 15px;
  font-size: 11px;
}

.centre-6-2 {
  width: 568px;
  margin-bottom: 16px;
}

.centre-6-3 {
  display: flex;
  font-size: 11px;
  margin-bottom: 20px;
  margin-left: 20px;
  padding-top: 15px;
}

.centre-6-9 {
  font-size: 11px;
  margin-right: 24px;
}

.centre-6-9 > span {
  margin-right: 34px;
}

.centre-6-4 {
  display: flex;
}

.centre-6-5 {
  font-size: 11px;
  margin-left: 20px;
}

.centre-6-6 {
  font-size: 11px;
  margin-left: 20px;
}

.centre-6-4 {
  display: flex;
}

#selectForm >>> .el-form-item__label {
  font-size: 11px;
}

.centre-5-1 {
  margin-right: 45px;
}

.centre-5-2 {
  margin-left: 10px;
}

.centre-6-2-1 {
  color: #fff;
  font-weight: bolder;
  margin-left: 10px;
  margin-right: 20px;
}

.centre-6-2-2 {
  color: #fff;
  font-weight: bolder;
}

.img {
  width: 120px;
  height: 72px;
  background-color: #000000;
  margin-top: 8px;
  margin-left: 8px;
}

.img-1 {
  width: 164px;
  height: 98px;
  /* background-color: #000000; */
  margin: auto;
  margin-top: 10px;
}

.img-1-1 {
  margin-left: 12px;
  margin-top: 5px;
}

.img-1-1 :nth-of-type(1) {
  font-size: 12px;
  font-weight: bolder;
}

.img-1-1 :nth-of-type(2) {
  font-size: 8px;
}

.img-1-2 {
  width: 88%;
  height: 1px;
  border-top: 1px solid #e0e0e0;
  margin: auto;
  margin-top: 3px;
  margin-bottom: 3px;
}

.img-1-3 {
  font-size: 8px;
  margin-left: 12px;
  line-height: 20px;
}

.img-1-4 {
  font-weight: bolder;
  margin-left: 70px;
}

.img-1-5 {
  display: flex;
  flex-direction: row-reverse;
  margin-right: 12px;
  margin-top: 20px;
}

.img-1-5 :nth-of-type(1) {
  font-size: 20px;
  color: #f06f2d;
  font-weight: bolder;
}

.img-1-5 :nth-of-type(2) {
  margin-top: 8px;
  font-size: 8px;
  text-decoration: underline;
}

.message {
  width: 568px;
  height: 170px;
  background-color: #f7f6f9;
  margin-bottom: 20px;
}

.message-1 {
  width: 500px;
  height: 95px;
  display: flex;
  padding-left: 20px;
  padding-top: 10px;
}

.message-1-1 {
  margin-right: 30px;
  font-size: 11px;
}

.message-1-3-1 {
  cursor: pointer;
  width: 73px;
  height: 48px;
}

.message-1-2 {
  width: 300px;
  height: 41px;
  display: flex;
}

.message-1-3 {
  margin-right: 20px;
  width: 67px;
}

.message-1-3-2 {
  display: flex;
  font-size: 10px;
}

.message-1-3-2 > span:nth-of-type(1) {
  width: 100px;
  /* background-color: blue; */
}

.message-2 {
  margin-left: 20px;
  color: #000000;
  font-size: 11px;
}

.message-2 > span {
  margin-right: 20px;
}

.message-4 {
  margin-left: 10px;
}

.message-4-1 {
  font-size: 10px;
  margin-top: 80px;
}

.message-4-2 {
  font-size: 12px;
  color: #4f4f4f;
  font-weight: bolder;
}

.discounts {
  width: 568px;
  height: 136px;
  background-color: #f7f6f9;
  padding-top: 1px;
  padding-left: 20px;
  margin-bottom: 20px;
}

.make {
  width: 568px;
  height: 48px;
  background-color: #f7f6f9;
  margin-bottom: 20px;
  display: flex;
}

.make > span {
  margin-top: 16px;
  margin-left: 20px;
  margin-right: 10px;
  font-size: 11px;
}

.make > div {
  margin-top: 9px;
}

.pay {
  width: 568px;
  height: 48px;
  background-color: #f7f6f9;
  margin-bottom: 20px;
  display: flex;
}

.pay > span {
  margin-top: 16px;
  margin-left: 20px;
  margin-right: 10px;
  font-size: 11px;
}

.pay > div {
  margin-top: 9px;
}

.invoice {
  width: 568px;
  height: 160px;
  background-color: #f7f6f9;
  margin-bottom: 20px;
  padding-top: 10px;
  font-size: 11px;
}

.box {
  padding-top: 20px;
  background-color: #f2f2f2;
}

.wei-1 {
  padding-bottom: 30px;
  margin-top: 30px;
}

.gongsi {
  cursor: pointer;
  color: #2f80ed;
  text-decoration: none;
}

.el-icon-delete-solid {
  margin-left: 80px;
  margin-top: 6px;
  font-size: 20px;
}

.discounts {
  width: 548px;
}

.discounts-2 {
  font-size: 11px;
  color: #4b71bf;
  font-weight: bolder;
}

.discounts-3 {
  font-size: 11px;
}

.discounts-4 {
  font-size: 11px;
  color: #f06f2d;
}

.discounts-5 {
  font-size: 11px;
}

.discounts-6 {
  font-size: 11px;
  color: #f06f2d;
}

.header-1-1-1 {
  display: flex;
}

.img_1 {
  width: 73px;
  height: 50px;
}

.img_2 {
  width: 164px;
  height: 98px;
}

.header-1-1-14 {
  /* width: 200px; */
  height: 3000px;
  font-weight: bolder;
  display: flex;
}

/* 支付页面css */
.box1 {
  border: 1px solid #ccddee;
  margin-top: 14px;
}

.box1-top {
  background-color: #edf8ff;
  height: 39px;
  line-height: 39px;
  padding: 10px 12px;
}

.box1-body {
  width: 100%;
  /* width: 730px; */
  padding: 10px 0;
  display: flex;
}

.valuecss {
  width: 150px;
  margin-left: 20px;
}

.body {
  color: #4fb8fe;
}
</style>